<template>
    <div class="userSignIn">
        <div class="user-contain">
            <mu-container>
                <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                    <mu-form-item label="手机号码" prop="mobile" :rules="usernameRules">
                    <mu-text-field type="tel" placeholder="请输入您的手机号" max-length="11" v-model.trim="validateForm.mobile" prop="mobile"></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="验证码" prop="code" :rules="passwordRules">
                        <mu-text-field type="tel" placeholder="请任意输入4位数字" max-length="4" v-model.trim="validateForm.code" prop="code"></mu-text-field>
                        <!-- <mu-button color="#6794F5">验证码</mu-button> -->
                        <!-- <div style="position:absolute;right:0">111</div> -->
                        <mu-button class="code" @click="getCode" color="#6794F5">{{codeTxt}}</mu-button>
                    </mu-form-item>
                    <div class="btn">
                        <mu-button color="#6794F5" style="height:.48rem;" @click="submit" full-width>提交</mu-button>
                    </div>
                </mu-form>
            </mu-container>
        </div>
    </div>
</template>
<script>
import {http} from '../../utils/request.js';
import api from '../../api/index.js';
const reg_mobile = /^1[3,4,5,6,7,8,9]\d{9}$/; // 校验电话号码格式
export default {
  name: "userSignIn",
  data() {
    return {
      usernameRules: [
        { validate: val => !!val, message: "必须填写手机号码" },
        {validate: val => reg_mobile.test(val),message: "请填写正确的手机号码" }
      ],
      passwordRules: [
        { validate: val => !!val, message: "必须填写验证码" },
      ],
      argeeRules: [{ validate: val => !!val, message: "必须同意用户协议" }],
      validateForm: {
        mobile: "",
        code: "",
        isAgree: false
      },
      codeTxt: "获取验证码",
      timeFlag: true,
    };
  },
  mounted() {
      document.title = '用户登录';
  },
  methods: {
    //获取验证码
    getCode() {
        const result = this.$refs.form.items[0].validate();
        if(result) {
            //防止重复提交
                if(!this.timeFlag) return;
                this.timeFlag = false;
                let NUM = 59;
                const timer = setInterval(()=>{
                    this.codeTxt = "重新发送("+ NUM + ")";
                    if(NUM==0) {
                        this.codeTxt = "重新发送";
                        this.timeFlag = true;
                        clearInterval(timer);
                    };
                    NUM--;
                },1000);
        };
    },
    //提交
    submit () {
      this.$refs.form.validate().then((result) => {
        if(result) {
            const fromPage = this.$route.query.fromPage;
            if(fromPage) {
                this.$router.push({
                    name:fromPage,
                    query: {
                        mobile: this.validateForm.mobile,
                        fromPage:fromPage
                    }
                });
            }else{
                this.$router.push("/");
            }
            // http.post(api.API_LOGIN_URL,{
            //     mobile: this.validateForm.mobile,
            //     code: this.validateForm.password
            // }).then(((res) => {
            //     //登陆成功
                
            // })).catch((error) =>{
            //     console.log(error);
            // });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
    .userSignIn{
        position: relative;
        overflow: hidden;
        @include size(100%,100%);
        .user-contain{
            margin: rem(50) rem(7) 0;
        }
        .btn{
            margin-top: rem(40);
        }
        .code{
            position:absolute;
            right:0;
            top:0;
            top: rem(9);
        }
    }
</style>

